<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/first' }">位置：</el-breadcrumb-item>
      <el-breadcrumb-item>个人管理</el-breadcrumb-item>
      <el-breadcrumb-item>培训信息</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <!-- 查询、新建、报名列表切换 -->
    <el-row>
      <el-button type="primary" plain @click="show(1)">展示培训信息</el-button>
      <el-button type="success" plain @click="show(2)">申请培训计划</el-button>
    </el-row>
    <br />
    <!-- 查询培训信息 -->
    <el-form :inline="true"  class="demo-form-inline" v-show="isShow1">
      <el-form-item label="报名状态：">
        <el-select v-model="search" placeholder="查询全部">
          <el-option label="查询全部" value=""></el-option>
          <el-option label="已开始" value="报名开始"></el-option>
          <el-option label="已结束" value="已结束"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 培训信息 -->
    <el-table :data="trainData1" style="width: 100%" border v-show="isShow1">
      <el-table-column prop="PXName" label="培训名称"> </el-table-column>
      <el-table-column prop="PXContent" label="培训内容"> </el-table-column>
      <el-table-column prop="PXBegTime" label="培训开始时间">
        <template slot-scope="scope">
          {{ scope.row.PXBegTime | filterTime }}
        </template>
      </el-table-column>
      <el-table-column prop="PXEndTime" label="培训结束时间">
        <template slot-scope="scope">
          {{ scope.row.PXEndTime | filterTime }}
        </template>
      </el-table-column>
      <el-table-column prop="PXAddress" label="培训地点"> </el-table-column>
      <el-table-column prop="PXStatus" label="报名状态"> </el-table-column>
      <el-table-column prop="apply" label="申请状态"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="apply(scope.row)" :disabled="scope.row.applyjlf">去报名</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 申请培训计划 -->
    <el-form ref="form" :model="form" label-width="120px" v-show="isShow2"
      style="width: 600px; position: relative; left: 285px">
      <el-form-item label="培训项目：">
       <el-select v-model="form.pxname" placeholder="请选择培训项目" :disabled="flag">
      <el-option :label="item.PXName" :value="item.PXId" v-for="item in applyok" :key="item.PXId"></el-option>
    </el-select>
      </el-form-item>
      <el-form-item label="申请工号：">
        <el-input v-model="form.usergh" ></el-input>
      </el-form-item>
      <el-form-item label="申请人：">
        <el-input v-model="form.name" ></el-input>
      </el-form-item>
      <el-form-item label="申请原因：">
        <el-input v-model="form.because" type="textarea"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addok">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";
import Qs from "../../node_modules/qs";
import Vue from 'vue';
export default {
  filters: {
    filterTime(val) {
      return moment(val).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  data() {
    return {
      isShow1: true, // 查询显示
      isShow2: false, // 新建隐藏
      flag:false,//选择申请项目节流阀
      search:'',// 查询培训信息
      // 新建培训计划
      form: {
        pxname: "", // 培训名称
        pxid:'',//培训id
        usergh:'',//申请工号
        name:'',//申请人
        because:''//申请原因
      },
      trainData: [], // 培训列表
      trainData1: [], // 培训列表赛选
      baomingData: [], // 报名列表
      applyok:[],//可报名的培训
    };
  },
   watch:{
    search:{//监听查询
      immediate:true,
      handler(v){
        console.log(v);
        this.trainData1=this.trainData.filter(item=>{
          return item.PXStatus.includes(v)
        })
      }
    }
  },
  methods: {
    // 信息、添加列表切换
    show(e) {
      if (e == 1) {
        this.isShow1 = true;
        this.isShow2 = false;
       
        this.reshow();
      } else if (e == 2) {
        this.isShow1 = false;
        this.isShow2 = true;
      } 
       this.flag=false;
       this.empty();
    },
    // 刷新
    reshow() {
      let that = this;
      var usergh=this.$store.state.logininfo.UserGH;
      axios({
        method: "get",
        url: "http://127.0.0.1:9090/alltrain",
      }).then(function (res) {
        that.trainData = res.data.data;
         that.$axios.get(`/person_train?usergh=${usergh}`).then(res=>{
          that.baomingData=res.data.data;
          // 从申报项目表that.baomingData去核对培训项目表that.trainData的项目,是否已被申报,已申报就添加字段已申请，反之亦然
          for (let i = 0; i < that.trainData.length; i++) {
           for (let j = 0; j < that.baomingData.length; j++) {
              if (that.trainData[i].PXId==that.baomingData[j].PXId) {
                // that.trainData[i].apply='已申请';
                Vue.set(that.trainData[i],'apply','已申请')
                break;
              }else{
                // that.trainData[i].apply='未申请';
                Vue.set(that.trainData[i],'apply','未申请')
              }
           }
          }
          // 判断项目是否开始报名，和自己申报状态，添加按钮节流阀
            that.trainData.forEach((item,i)=>{
              if (item.PXStatus=='报名开始'&&item.apply=='未申请') {
                 Vue.set(that.trainData[i],'applyjlf',false)
              }else{
                 Vue.set(that.trainData[i],'applyjlf',true)
              }
            })
            that.trainData1=that.trainData
            console.log(that.trainData1);
        })
      });
    },
    // 清空
    empty() {
      this.form.pxname = "";
      this.form.pxid = "";
      this.form.because = "";
    },
    // 申请培训信息
   apply(v) {
        this.isShow1 = false;
        this.isShow2 = true;
        this.form.pxname=v.PXName;
        this.form.pxid=v.PXId;
        this.form.usergh=this.$store.state.logininfo.UserGH;
        this.form.name=this.$store.state.logininfo.UserName;
        this.flag=true;
    },
    // 新增培训计划
    addok() {
      let that = this;
      var id=this.form.pxid?this.form.pxid:this.form.pxname;
      axios({
        method: "post",
        url: "/add_trainsq",
        data: {
          usergh:that.form.usergh,
          because:that.form.because,
          pxid:id
        },
      }).then(function (res) {
        console.log(res);
        if (res.data.state == 1) {
          alert("添加成功");
          this.isShow1 = true;
         this.isShow2 = false;
          that.empty();
        } else {
          alert("添加失败");
          that.empty();
        }
      });
    },
   
   
    // 查看员工报名情况
    show3() {
      let that = this;
      axios({
        method: "get",
        url: "/trainok",
      }).then(function (res) {
       that.applyok=res.data.data;
      });
    },
  },
  created() {
    this.reshow();
    this.show3();
    this.form.usergh=this.$store.state.logininfo.UserGH;
    this.form.name=this.$store.state.logininfo.UserName;
  },
};
</script>

<style scoped>
/* 列表切换、模糊查询左对齐 */
.el-row,
.el-form {
  text-align: left;
}

.el-form-item__label {
  text-align: left !important;
}
</style>